import { memo } from "react";
import { OrganizationType } from "../../../../types/organization";
import { Image } from "antd-mobile";
import { CheckCircleOutline } from "antd-mobile-icons";
import OrgDetailHeadStyle from "./style";

const OrgDetail_head = memo((props: { data: OrganizationType }) => {
  const { data } = props;

  return (
    <OrgDetailHeadStyle>
      <div className="head">
        <div className="title">
          <div className="logo">
            <Image src={data?.logo ? data.logo : ""} fit={"cover"} />
          </div>
          <div className="name">{data?.name}</div>
        </div>
        <div className="tags">
          {data?.tags?.split("，").map((item) => {
            return (
              <div className="tagItem" key={item}>
                <CheckCircleOutline />
                {item}
              </div>
            );
          })}
        </div>
      </div>
    </OrgDetailHeadStyle>
  );
});

export default OrgDetail_head;
